<template>
  <div class="container">
    <el-alert class="message" v-show="this.alert === true" title="收藏成功" type="success" center show-icon>
    </el-alert>
    <Header></Header>
    <Nav></Nav>
    <div>
      <!-- top -->
      <div class="content">
        <div class="top" v-for="(ss, index) in select_content" :key="ss.id">
          <p class="title">{{ ss.title }}</p>
          <p class="information">{{ ss.information }}</p>
          <p><i @click="collection(), close()" :class="{ star: colorindex === index }"
              class="el-icon-star-on i_star"><span>收藏</span></i></p>
        </div>
        <!-- center -->
        <div class="center" v-show="table === false">
          <table class="select_comment" v-for="(c, index) in comment" :key="c.id">
            <tr>{{ c.username }}:<p>{{ c.comment }}</p>
            </tr>
          </table>
        </div>
        <!-- bottom -->
        <div class="bottom">
          <p class="comment">评论</p>
          <textarea name="" class="text" v-model="userComment"></textarea>
          <p><button class="btn" @click="push()">发送</button></p>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'

export default {
  name: 'search_slelect',
  components: {
    Header,
    Nav,
    Footer
  },
  created() {
    eventBus.$on('select_content', item => {
      this.select_content = item
      this.title = this.select_content[0].title
      // console.log(this.select_content)
    }),
      eventBus.$on('username', item => {
        this.username = item
        // console.log(this.username)
      })
  },
  data() {
    return {
      username: [],
      title: [],
      userComment: [],
      select_content: [],
      comment: [],
      colorindex: 1,
      index: 2,
      alert: false,
      table: false,
    }
  },
  mounted() {
    //发送post请求
    setTimeout(() => {
      this.$axios.get(`/api/comment/getComment/${this.select_content[0].title}`)
        .then(res => {
          this.comment = res.data
          if (res.data === '查无数据') {
            this.table = true
          }
          // console.log(res.data)
        })
    }, 300)
  },
  methods: {
    // 主页搜索
    collection() {
      this.colorindex = this.index
      // console.log(this.username)
      //发送post添加收藏请求
      this.$axios.post('/api/userCollection/addcollection', { username: this.username, title: this.select_content[0].title })
        .then(res => {
          console.log('收藏成功')
          // this.$router.push('/login');
        })
    },
    //关闭
    close() {
      this.alert = true
      setTimeout(() => {
        this.alert = false
      }, 3000)
    },
    //添加收藏
    push() {
      // 发送post添加收藏请求
      this.$axios.post('/api/comment/addComment', { username: this.username, title: this.select_content[0].title, comment: this.userComment })
        .then(res => {
          alert('评论成功')
          this.table = false
          //更新数据
          this.$axios.get(`/api/comment/getComment/${this.select_content[0].title}`)
            .then(res => {
              this.comment = res.data
              if (res.data === '查无数据') {
                this.table = true
              }
              // console.log(res.data)
            })
        }).catch((err) => {
          this.$message.error('评论失败')
        })
      // console.log(this.userComment)
    }
  }
}
</script>

<style scoped>
.content,
.center .top,
.bottom {
  width: 800px;
  height: auto;
}

.content {
  margin-left: 300px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: blue;
}

.information {
  margin-left: 50px;
}

.btn {
  margin-left: 700px;
  border: none;
  border-radius: 20px;
  width: 98px;
  height: 41px;
  background-color: cornflowerblue;
}

.text {
  width: 792px;
  height: 100px;
}

.comment {
  font-size: 30px;
  font-weight: bold;
}

.star {
  color: yellow;
}

.i_star {
  margin-left: 600px;
  font-size: 25px;
  color: gray;
}

.message {
  position: fixed;
  float: left;
}

.select_comment {
  margin-left: 50px;
}

.select_comment tr {
  display: block;
  width: 700px;
  background-color: #afb4db;
}

.center {
  /* 设置盒子内容上下滚动 */
  height: 220px;
  overflow: auto;
}
</style>
